<template>
  <div style="padding-top:5px;height:950px;"
    >
  <div :style="contentDiv.parent">
    <div :style="contentDiv.child_frist">
        <div >
          <el-form :inline="true" :model="searchContentLeft" class="demo-form-inline">

            <el-form-item label="内容" style="margin-bottom:10px;">
                <el-input v-model="searchContentLeft.content" placeholder="输入要查询的内容"  size="small" style="width:300px"></el-input>
            </el-form-item>
            <el-form-item style="margin-bottom:10px;">
              <el-button type="primary" @click="submitQueryLeft" size="small">查询</el-button>
              <el-button type="primary" @click="handleAdd" size="small">添加数据</el-button>
              <!-- <el-button type="primary" @click="syncNewData" size="small">同步最新1期数据</el-button> -->
            </el-form-item>
          </el-form>
        </div>
       <el-table
        :data="tableDataLeft"
        border
        stripe
        size="mini"
        style="width: 100%">
        <el-table-column      
          label="序号"
          prop="serialNo"
          :width="tableStyleLeft.serialNo.width"
          >
        </el-table-column>
        <!-- <el-table-column      
          prop="publishDate"
          label="开奖日期"
          :width="tableStyleLeft.no.width"
          >
        </el-table-column> -->
        <el-table-column      
          label="期数"
          prop="no"
          :width="tableStyleLeft.no.width"
          >
        </el-table-column>
        <el-table-column      
          prop=""
          label="内容"
          >
            <template slot-scope="scope">
              <div class="kaij-cartoon">
                  <span  :class="classObject1(index, item.color)" v-for="(item, index) in scope.row.contentList"  style="line-height: 33px;">{{item.content}}</span>
              </div>
              <!-- <div class="kaij-cartoon-new">
                  <span :class="classObject2(index)" v-for="(item, index) in scope.row.animalList">{{item}}</span>
              </div>
              <div class="kaij-cartoon-new">
                  <span :class="classObject2(index)"  v-for="(item, index) in scope.row.wuxingList">{{item}}</span>
              </div> -->
            </template>
        </el-table-column>
        <el-table-column label="操作" :width="tableStyleLeft.operator.width">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">修改</el-button>        
          <el-button slot="reference"
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)" >删除</el-button>
        </template>
      </el-table-column>
      </el-table>
      <el-pagination
      @size-change="handleSizeChangeLeft"
      @current-change="handleCurrentChangeLeft"
      :current-page="currentPageLeft"
      :page-sizes="pageSizeArr"
      :page-size="pageSizeLeft"
      :layout="layout"
      :pager-count="pagerCountLeft"
      :total="totalRecordLeft">
    </el-pagination>
      <div v-if="totalVisible" style="font-size:14px;padding-top:10px">共{{totalRecordLeft}} 条</div>
    </div>
    <el-dialog :title="dialogFormTitle" :visible.sync="dialogFormVisible" :width="dialogWidth" :close-on-click-modal="closeOnClickMdal">
      <el-form :model="form" :label-width="formWidth" :rules="rules" ref="form">
        <el-form-item label="序号" :label-width="formLabelWidth" prop="serialNo">
          <el-input v-model="form.serialNo" autocomplete="off"></el-input>
        </el-form-item>
          <el-form-item label="期数" :label-width="formLabelWidth" prop="no">
          <el-input v-model="form.no" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="内容" :label-width="formLabelWidth" prop="content">
          <el-input v-model="form.content" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelSave('form')">取 消</el-button>
        <el-button type="primary" v-preventReClick="3500"  @click="submitInsertOrUpdate('form')">确 定</el-button>
      </div>
    </el-dialog>
    <div :style="contentDiv.child_other">
       <div >
          <el-form :inline="true" :model="searchContent" class="demo-form-inline">
            <!-- <el-form-item label=">=" style="margin-bottom:10px;">
                <el-input v-model="searchContent.repeat" placeholder="重复次数最小值"  size="small" style="width:150px"></el-input>
            </el-form-item> -->
            <!-- <el-form-item style="margin-bottom:10px;margin-left:20px;">
                <el-button type="primary" @click="jiSuanRepeat" size="small">计算重复</el-button>
            </el-form-item> -->
            <el-form-item style="margin-bottom:10px;margin-left:20px;">
                <el-button type="primary" @click="jiSuanRepeatOnlyOne" size="small">计算最新一期重复</el-button>
            </el-form-item>
            <!-- <label class="el-form-item__label">统计重复方式</label>
            <el-select v-model="searchContent.number" placeholder="请选择"  label="统计重复方式" style="width:150px;margin-top:3px" size="small">
              <el-option label="相邻组" value="1"></el-option>
              <el-option label="隔一组" value="2"></el-option>
              <el-option label="隔二组" value="3"></el-option>
              <el-option label="隔三组" value="4"></el-option>
              <el-option label="隔四组" value="5"></el-option>
              <el-option label="隔五组" value="6"></el-option>
              <el-option label="隔六组" value="7"></el-option>
            </el-select> -->
            <!-- <el-form-item label="内容" style="margin-bottom:10px;">
                <el-input v-model="searchContent.no" placeholder="输入期号"  size="small" style="width:300px"></el-input>
            </el-form-item> -->

            <el-form-item style="margin-bottom:10px;margin-left:20px;">
                <el-button type="primary" @click="submitQuery" size="small">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-table
      :data="tableData"
      border
      size="mini"
      :row-style="rowStyleCallBack"
      :style="tableStyle.tableHead">
      
      <el-table-column
        label="隔几组"
          prop="num"
          :width="tableStyle.no.width"
        >     
      </el-table-column>
      <el-table-column
        label="序号"
          prop="serialNo"
          :width="tableStyle.no.width"
        >     
      </el-table-column> 
       <el-table-column
        label="期数"
          prop="no"
          :width="tableStyle.no.width"
        >     
      </el-table-column>
      <!-- <el-table-column
        prop="publishDate"
        label="开奖日期"
        :width="tableStyle.no.width">
      </el-table-column>   -->
      <el-table-column
        prop="content"
        label="号码"
        :width="tableStyle.no.width">
      </el-table-column>
      <el-table-column
        prop="repeat"
        label="重复次数"
        >
        <!-- <template slot-scope="scope">
            <div class="kaij-cartoon">
                <span  :class="classObject1(index, item.color)" v-for="(item, index) in scope.row.contentList"  style="line-height: 33px;">{{item.content}}</span>
            </div> -->
            <!-- <div class="kaij-cartoon-new">
                <span :class="classObject2(index)" v-for="(item, index) in scope.row.animalList">{{item}}</span>
            </div>
            <div class="kaij-cartoon-new">
                <span :class="classObject2(index)"  v-for="(item, index) in scope.row.wuxingList">{{item}}</span>
            </div> -->

          <!-- </template> -->
      </el-table-column>
      <!-- <el-table-column
        prop="repeat"
        label="重复次数"
        :width="tableStyle.repeat.width"
        >
      </el-table-column>  -->
    </el-table>
    <!-- <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="pageSizeArr"
      :page-size="pageSize"
      :layout="layout"
      :pager-count="pagerCount"
      :total="totalRecord">
    </el-pagination> -->
    <div v-if="totalVisible" style="font-size:14px;padding-top:10px">共{{totalRecord}} 条</div>
    </div>
  </div>
    

  </div>
</template>

<script>
import { mapState } from "vuex";
import store from '@/store';

import API from '@/api/blogs.js'
  export default {
    name: 'QiBuZhong',
    data() {
      return {
        // 分页组件配置
        currentPage: 1,
        totalRecord:0,
        pageSize:10,
        pageSizeArr:[10, 20, 50, 100],
        layout:"total, sizes, prev, pager, next, jumper",
        pagerCount:7,
        totalVisible:false,
        // 分页查询
        lotteryTicket: {
          pageNo:1,
          pageSize:20,
          repeat: 4,
          no: ''
        },
        // 搜索框配置
        searchDiv:{
          styles:{
              width: '100px'
          }
        },
        arr2:[],
        searchContent:{
          no:"",
          number:"1"
        },
        searchContentLeft:{
          content:""
        },

        formLabelWidth: 'auto',
        formWidth:'100%', 
        searchTableData:[
            
        ],
        searchTableDataLeft:[
            
        ],
        // 分页查询
        lotteryTicketLeft: {
          pageNo:1,
          pageSize:10,
          no: ''
        },

        currentPageLeft: 1,
        totalRecordLeft:0,
        pageSizeLeft:10,
        pagerCountLeft:7,

        // 表格数据
        tableData: [],
        tableDataLeft: [],
        tableStyle:{
          no:{
            width:'150px'
          },
          repeat:{
            width:'80px'
          },
          tableHead:{
            'margin': '0 auto',
            'width':'100%'
          }
        },

        tableStyleLeft:{
          serialNo:{
            width:'84px'
          },
          no:{
            width:'84px'
          },
          tableHead:{
            'margin': '0 auto',
            'width':'100%'
          },
          operator:{
            width:'150px'
          }
        },
        contentDiv: {
          parent:{
            clear:'both',
            width:'100%'
            
          },
          child_frist:{
            float:'left',
            width:'35%',
          },
          child_other:{
            float:'left',
            width:'45%',
            marginLeft:'80px'
          }
        },

        // 对话框设置
        closeOnClickMdal:false,
        formLabelWidth: 'auto',
        dialogWidth:'50%',
        formWidth:'100%',
        dialogFormVisible: false,
        dialogUploadVisible:false,
        dialogFormTitle: '',
        delPopVisible: false,
                // 表单提交
        form: {
          id: null,
          serialNo:null,
          no: '',
          content: ''
        },
        rules:{
          serialNo: [
            { required: true, message: '请输入序号', trigger: 'blur' }  
          ],
          no:[
            { required: true,  message: '请输入期数', trigger: 'blur' } 
          ],
          content: [
            { required: true, message: '请输入内容', trigger: 'blur' }  
          ] 
        }
      }
    },
    created(){
      //this.isMobile();
      this.getTicketListPage();
    },
    computed: {
        classObject1(){
        return function(index, color){
          //return index == 6? "ball-list-newfont "+ color : "ball-list "+ color
          return "ball-list "+ color
        }
      },
      classObject2(){
        return function(index){
          return index == 6? "ball-list-new gray": "ball-list-new "
        }
      },

      
	  },
    methods: {
       handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.lotteryTicket.pageSize  = val;
        this.lotteryTicket.pageNo  = 1;
        this.getRepeatListPage();
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.lotteryTicket.pageNo  = val;
        this.getRepeatListPage();
      },

      rowStyleCallBack({row, rowIndex}){
          console.log("==========")
          console.log(row)
          return row.result ==1? {background: "#f8b4a8"}:{background: "white"}
      },


      handleSizeChangeLeft(val) {
        console.log(`每页 ${val} 条`);
        this.lotteryTicketLeft.pageSize  = val;
        this.lotteryTicketLeft.pageNo  = 1;
        this.getTicketListPage();
      },
      handleCurrentChangeLeft(val) {
        console.log(`当前页: ${val}`);
        this.lotteryTicketLeft.pageNo  = val;
        this.getTicketListPage();
      },

      submitQuery(){
        this.lotteryTicket.repeat = this.searchContent.repeat
        this.lotteryTicket.number = this.searchContent.number
        console.log(this.lotteryTicket)
        this.getBuyTicketList()
      },
      submitQueryLeft(){
        this.lotteryTicketLeft.no = this.searchContentLeft.content
        console.log(this.lotteryTicketLeft)
        this.getTicketListPage()
      },

      syncNewData(){
        this.syncNewData()
      },

      // 列表查询
      getBuyTicketList:function(){
        console.log("getRepeatListPage...")
        this.arr2 = [];
        this.tableData=[];
        this.lotteryTicket.type=1
        API.getBuyTicketList(this.lotteryTicket).then(res => {
          //请求成功
          if(res.code == '00000000'){
            console.log(res.data)
            this.tableData = res.data;
            // if(this.tableData.length == 0){
            //   this.currentPage = 1;
            // }else{
            //   this.currentPage = res.data.pageNo;  
            // }  
            // this.totalRecord =  res.data.count;
            // this.pageSize = res.data.pageSize;
            let a= [];
            Object.assign(a, this.searchTableData);
            this.searchTableData = [];
            this.searchTableData = a;
          }
        }).catch(err => {
            //请求失败
            console.log("error:"+ err)
        })
      },

      getTicketListPage:function(){
        console.log("getRepeatListPage...")
        this.arr2 = [];
        this.lotteryTicketLeft.type=1;
        API.getTicketListPage(this.lotteryTicketLeft).then(res => {
          //请求成功
          if(res.code == '00000000'){
            console.log(res.data)
            this.tableDataLeft = res.data.list;
            if(this.tableDataLeft.length == 0){
              this.currentPageLeft = 1;
            }else{
              this.currentPageLeft = res.data.pageNo;  
            }  
            this.totalRecordLeft =  res.data.count;
            this.pageSizeLeft = res.data.pageSize;
            let a= [];
            Object.assign(a, this.searchTableDataLeft);
            this.searchTableDataLeft = [];
            this.searchTableDataLeft = a;
          }
        }).catch(err => {
            //请求失败
            console.log("error:"+ err)
        })
       
      },

      syncNewData:function(){
        let _self = this
        store.dispatch('syncDataLoading', true);
        API.syncNewData().then(res => {
          //请求成功
          if(res.code == '00000000'){
            this.$message({
                type: 'success',
                message: '同步数据成功!'
              });
              store.dispatch('syncDataLoading', false);
              _self.getTicketListPage();
          }
        }).catch(err => {
            //请求失败
        })
      },
      
      handlePreview(file) {
        console.log(file);
      },
      submitInsertOrUpdate(formName){
        console.log("新增提交submitInsertOrUpdate");
        let content = this.form.content.replace("，", ",")
                              .replace(":",",").replace("：",",").replace("；",",")
        let arry = content.split(".")
        content = arry.join(",")
        this.form.content = content
        this.form.type=1
        console.log(this.form);
        let flag = false;
        this.$refs[formName].validate((valid) => {
          if (valid) {
          } else {
            console.log('error submit!!');
            flag = true;
            return false;
          }
        });
        if(flag){
          return;
        }
       let _self = this
        API.insertOrUpdateData(this.form).then(res => {
          _self.$refs[formName].resetFields();
          //请求成功
          //console.log("queryBlogList:"+ JSON.stringify(res));
          if(res.code == '00000000'){
            if(!this.form.id){
              this.$message({
                type: 'success',
                message: '添加成功!'
              });
            }else{
              this.$message({
                type: 'success',
                message: '修改成功!'
              });
            }
            _self.dialogFormVisible = false;
            //_self.form = {"id":"","no":"", "content":""};
            _self.getTicketListPage();
          }
          

        }).catch(err => {
            //请求失败
            console.log("error:"+ err)
        })
      },
      cancelSave(formName){
        this.$refs[formName].resetFields();
        this.dialogFormVisible = false;
      },
      handleAdd() {
        console.log("新增");
        this.dialogFormTitle = '新增数据';
        this.dialogFormVisible = true;
        this.form = {"id":"","serialNo":"","no":"", "content":""};
      },
      handleEdit(index, row) {
        console.log("修改", index, row);
        this.dialogFormTitle = '修改数据';
        this.dialogFormVisible = true;
        Object.assign(this.form, row);
        console.log("修改:", this.form)

      },
      handleDelete(index, row) {
        console.log("delete:", index, row);
        let _self = this;
        this.$confirm('此操作将永久删除'+row.content+', 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center:true
        }).then(() => {
          API.deleteData({"id": row.id,"type":1}).then(res => {
            //请求成功
            //console.log("queryBlogList:"+ JSON.stringify(res));
            if(res.code == '00000000'){
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              _self.getTicketListPage();
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      jiSuanRepeat:function(){
        let _self = this
        store.dispatch('syncDataLoading', true);
        API.jiSuanRepeat({'type':1}).then(res => {
          //请求成功
          if(res.code == '00000000'){
            this.$message({
                type: 'success',
                message: '计算数据成功!'
              });
              store.dispatch('syncDataLoading', false);
              _self.getTicketListPage();
          }
        }).catch(err => {
            //请求失败
        })
      },
      jiSuanRepeatOnlyOne:function(){
        let _self = this 
        store.dispatch('syncDataLoading', true);
        API.jiSuanRepeatOnlyOne({'calculate': '1', 'type':1}).then(res => {
          //请求成功
          if(res.code == '00000000'){
            this.$message({
                type: 'success',
                message: '需要你等待几分钟再查看数据'
              });
              store.dispatch('syncDataLoading', false);
              _self.getTicketListPage();
          }
        }).catch(err => {
            //请求失败
        })
      }
    } 
  }
</script>
<style scoped>

.el-form-item:first{
  margin-left:0px;
}

input{
  width:100px !important;
}
.ball-list.red {
    background: #c31a00;
}
.ball-list.green {
    background: #1fc26b;
}
.ball-list {
    display: inline-block;
    margin: 2px;
    height: 30px;
    width: 30px;
    font-size: 1.8 rem;
    color: #fff !important;
    border-radius: 50% ;
    text-align: center;
    line-height: 30px;
    overflow: hidden;
}
.ball-list.blue {
    background: #0092dd;
}
.ball-list-newfont {
    display: inline-block;
    height: 36px;
    width: 36px;
    font-size: 3rem;
    text-align: center;
    line-height: 36px;
    overflow: hidden;
}
.ball-list-new {
    font-size: 1.1rem;
    color: #a9a9a9;
    height: 20px;
    width: 30px;
    line-height: 20px;
    display: inline-block;
    margin: 2px;
    text-align: center;
    overflow: hidden;
}

.kaij-cartoon.red {
    background: #f8b4a8;
}
.kaij-cartoon.gray {
    background: #eeeae9;
}
</style>